
@import '../../style/themes/index';
@import './mixin.less';
@typography-prefix-cls: ~'@{kd-prefix}-typography';
.@{typography-prefix-cls} {
  color: @typography-color-text-primary;
  overflow-wrap: break-word;
  line-height: 2;
  max-width: @typography-max-width;

  &&-second {
    color: @typography-color-text-secondary;
  }

  &&-success {
    color: @typography-color-success;
  }

  &&-warning {
    color: @typography-color-warning;
  }

  &&-danger {
    color: @typography-color-error;
  }

  &&-disabled {
    color: @typography-color-disabled;
    cursor: not-allowed;
    user-select: none;
  }

  &&-assist {
    color: @typography-color-text-third;
  }

  h1&,
  h2&,
  h3&,
  h4&,
  h5& {
    .@{typography-prefix-cls} + & {
      margin-top: @typography-title-margin-top;
    }
  }

  article& > div&{
    .typography-paragraph(@typography-paragraph-margin-bottom);
    &:first-child {
      .typography-paragraph(@typography-margin-bottom);
    }
  }

  article& > div& + div& {
    h2 {
      margin-top: @typography-margin-bottom;
    }
  }

  article& h1 {
    margin-top: 0;
    .typography-title-1(@heading-1-margin-bottom)
  }
  article& h2 {
    margin-top: 0;
    .typography-title-2(@heading-2-margin-bottom)
  }
  article& h3 {
    margin-top: 0;
    .typography-title-3(@heading-3-margin-bottom)
  }

  h1&,
  h1 {
    .typography-title-1();
  }
  h2&,
  h2 {
    .typography-title-2();
  }
  h3&,
  h3 {
    .typography-title-3();
  }
  // h4&,
  // h4 {
  //   .typography-title-4();
  // }
  // h5&,
  // h5 {
  //   .typography-title-5();
  // }

  code {
    margin: 0 0.2em;
    padding: 0.2em 0.4em 0.1em;
    font-size: 85%;
    background: rgba(150, 150, 150, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 3px;
  }

  kbd {
    margin: 0 0.2em;
    padding: 0.15em 0.4em 0.1em;
    font-size: 90%;
    background: rgba(150, 150, 150, 0.06);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-bottom-width: 2px;
    border-radius: 3px;
  }

  strong {
    font-weight: 600;
  }

  // list
  ul,
  ol {
    margin: 0 0 @heading-2-margin-bottom 0;
    padding: 0;

    li {
      margin: 0 0 0 20px;
      padding: 0 0 0 4px;
    }
  }

  ul {
    list-style-type: disc;

    ul {
      list-style-type: disc;
    }
  }

  ol {
    list-style-type: decimal;
  }
}
